<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机排序</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 
    <!-- jquery -->
    <script src="./js/jquery-3.6.0.min.js"></script>
    <link href="./css/bootstrap5.3.min.css" rel="stylesheet">
</head>
<body>
    <div id="randomapp" class="container col-lg-6 col-md-12">
        <!--        header 头部导航栏-->
        <div id="my_header">      </div>
        <h3 class=".bg-light.bg-gradient">多人参与可复现的随机排序算法</h3>

        <div id="create" v-show="showCreate" >
            <label class=".fs-3 text" for="exampleInputName2">房间名：</label>
            <input v-model="roomname" type="text" class="form-control" id="exampleInputName2" 
            placeholder="xxx小组排序">

            <label  class=".fs-3 text"  for="exampleInputName3">参与者（空格分开）：</label>
            <input v-model="roomusers" type="text" class="form-control" id="exampleInputName3" 
            placeholder="张三 李四 王五 Jack">
            <div> -- </div>
            <button type="button" class="btn btn-success" v-on:click="createRoom()">创建房间</button>
        </div>
        <div id="aftercreate" v-show=" ! showCreate">
            
            <div>房间名：<b>{{roomname}}</b></div>
            <div>参与者：[{{roomusers}}]</div>
            <br>
            <div>--------------分界线-------------------</div>
            <div>
                <div>输入一个数(小于9999)：<b>{{submited}}</b></div>
                <label for="exampleInputName4">Name</label>
                <input type="number" v-model="number"  class="form-control" id="exampleInputName4">
                <br>
                <button type="button" class="btn btn-success" v-on:click="submitOne()">提交一个数</button>
            </div>
            <div>当前的数字有：<b>[ {{roomnumbers}} ]  </b> </div>

            <br>
            <div>--------------分界线-------------------</div>

            <div id="genResult">
                <div>
                    <div>超过半数人提交之后，才能生成结果，当前有<b v-text="submitNum"> </b> 人提交。
                    一共<b>{{totalNum}}</b>人， 还差<b>{{parseInt(totalNum/2.0 - submitNum + 0.5)}}</b>人</div>
                    <button type="button" class="btn btn-warning" v-on:click="genResult()">生成结果</button>
                    <label><b v-show="resultUsers">结果已经生成！</b></label>
                </div>
                <div>
                    <div>生成的随机数：<b>[{{result}}]</b></div>
                    <div>排序之后，得到结果:</div>
                    <div><b>
                       [ {{resultUsers}}]
                    </b></div>
                </div>
            </div>
        </div>

        <!-- 算法解释 -->
        <div style="margin-top: 200px;">
			<button  v-on:click="changeShowAlgorithm()" class="btn btn-primary btn-sm">算法详情↓</button>
            <div v-show="showAlgorithm" >
                思想： <br>
                1 创建一个房间room，里面添加N个user.<br>
                2 每个user输入一个数number作为种子seek. <br>
                3 当半数N/2的user都输入自己的种子之后，将输入的所有seek求和形成seeks<br>
                4 将seeks作为java.util.Random的随机种子，用.nextInt(65535)获取N个随机数<br>
                5 N个随机数，对应每个user，从小到大排序，输出user排序序列<br>
                6 输入seek的过程是<b>多人参与的</b>, 由于固定随机种子，生成的随机序列是<b>可复现的</b><br>
            </div>
			
        </div>
        
	</div>

    </div>
</body>
<script src="./js/vue.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/vue-router.js"></script>
<style>
    .mymess{
        left: 100px;
        top: 50px;
        position: fixed;
        border: 1px solid #e9c5c5;
        border-radius: 5px;
        text-align: center;
        padding: 10px;
        width: 350px;
        font-size: large;
        color: aliceblue;
        background-color: #000000;
        opacity: 1;
    }
</style>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
    $(function(){
        $("#my_header").load("index_header.html");
    });
    function showmess(mess){
        let div = $("<div class=mymess>"+mess+"</div>");
        $("body").append(div);
        
        var intv = setInterval(()=>{
            let top = div.css("top");
            top = parseInt( top.split("px")[0]  );
            if( top > 500){
                div.remove();
                clearInterval(intv);
            }
            div.css("top", (top+5)+"px"  );
            div.css("opacity",  1-(top/(800.0))  );
        } ,17);
    }
    const app=new Vue({
        el: "#randomapp",
        data(){
            return {
                showAlgorithm: false, //算法详情显示状态
                showCreate: true,
                roomname: "",
                roomusers: "",
                roomnumbers: "",
                roomid: 0,
                users: [],
                numbers: [],
                submitNum: 0,  //提交人数 len（roomnumbers）
                number: 0,
                submited: "",  // 你已经提交
                totalNum: 0,
                result: "",
                resultUsers: "",
                resultState: ""  // 结果已经生成！
            }
        },
        methods: {
            changeShowAlgorithm:function(){ //改变 ShowAlgorithm
                this.showAlgorithm = ! this.showAlgorithm;
            },
            genResult:function(){
                this.myhttpsend(
                    "random/generateResult?roomid="+this.roomid,
                    (res)=>{
                        this.result = res.data.result;
                        this.resultUsers = res.data.resultusers;
                        showmess("生成结果成功");
                    }
                );
            },
            submitOne: function(){
                let myseek = localStorage.getItem("myseek");
                if(myseek && myseek == this.roomid+""){
                    showmess("你已经提交过了，不能重复提交。等半数人都提交之后，可以生成结果");
                    return;
                }
                if(this.number > 9999){
                    showmess("输入小于9999的数");
                    return;
                }
                this.myhttpsend("random/addOneNumber?roomid="+this.roomid +"&number=" + this.number,
                    (res)=>{
                        this.roomnumbers = res.data.roomnumbers;
                        this.numbers = this.roomnumbers.split(",");
                        this.submitNum = this.numbers.length;
                        this.totalNum = this.roomusers.split(",").length;
                        showmess("提交成功");
                        localStorage.setItem("myseek", "" + this.roomid);
                        this.submited = "你已经提交";
                })
            },
            mystrim: function(s){
                return s.replace(/(^\s*)|(\s*$)/g, "");
            },
            createRoom: function(){
                //将 空格替换为,
                let tmp = this.mystrim(this.roomusers).replace(/\s+/g,",");
                // alert(users);
                // return;
                // 创建房间
                this.myhttpsend(
                    "random/createRoom"
                        +"?roomname="+this.roomname+"&roomusers="+tmp
                    ,(res)=>{
                        //{"code":20,"data":{"roomid":6,"roomname":"房间名称2","roomusers":"霍华骑 张三 李四"},"mess":"创建room成功"}
                        this.roomid = res.data.roomid;
                        let href=window.location.href;
                        if(href.indexOf("#") == -1){
                            window.location.href=href+"#roomid=" + this.roomid;
                            this.showCreate = false;
                            location.reload();
                        }else{
                            href = href.split("#")[0];
                            window.location.href=href+"#roomid=" + this.roomid;
                        }
                    }
                    );
            },
            myhttpsend: function(url, callback){
                axios({
                        url: url,
                        method: 'get'
                    }).then(res=>{
                        if(res.data.code == 20){
                            callback(res.data)
                        }else{ 
                            console.log(res);
                            showmess( res.data.mess );
                        }
                    }).catch(err=>{
                        console.log(err);
                        // alert("出错", JSON.stringify(err));
                    });
            }

        },
        mounted(){
            let url = window.location.href;
            if(url.indexOf("#") != -1){
                let query = url.split("#")[1];
                // alert(query);
                this.roomid = query.split("=")[1] ;
                this.showCreate = false; //隐藏创建界面
                this.myhttpsend("random/getOneRoom?roomid="+this.roomid,
                    (res)=>{
                        console.log(res);
                        this.roomname = res.data.roomname;
                        this.roomusers = res.data.roomusers;
                        this.roomnumbers = res.data.roomnumbers;
                        if(this.roomnumbers){
                            this.numbers = this.roomnumbers.split(",");
                            this.submitNum = this.numbers.length;
                        }
                        this.totalNum = this.roomusers.split(",").length;

                        this.result = res.data.result;
                        this.resultUsers = res.data.resultusers;
                });
            }else{
                this.roomid = 0;
            }
            // 判断是否提交
            let myseek=localStorage.getItem("myseek");
            if(myseek && myseek == this.roomid+""){
                this.submited = "你已经提交";
            }
        }
    });
</script>



</html>